<!--
*@Author: QWP
*@Description: 
*@Date: 2024-06-26 16:59:00
-->
<template>
  <el-popover
    placement="bottom-start"
    title="隐藏列"
    trigger="manual"
    v-model="visible"
    @hide="() => checkList.splice(0, checkList.length)"
    @show="properShow">
    <el-checkbox-group v-model="checkList"
      class="u-filter-col-checkbox">
      <el-checkbox v-for="col in cols"
        :label="col.value"
        :key="col.value">
        {{ col.label }}
      </el-checkbox>
    </el-checkbox-group>
    <el-button type="text" @click="save(0)">保存</el-button>
    <el-button type="text" @click="save(1)">重置</el-button>
    <el-button type="text" @click="visible = false">关闭</el-button>
    <span slot="reference">
      <slot></slot>
      <i class="el-icon-arrow-down" 
        style="color: blue; cursor: pointer;"
        @click="visible = !visible">
      </i>
    </span>
  </el-popover>
</template>
<script>
import { jsonCopy } from '@/util/common';
export default {
  name: 'u-filter-col',
  props: {
    cols: [],
    values: []
  },
  data () {
    return {
      visible: false,
      checkList: []
    }
  },
  mounted() {},
  methods: {
    // 0 保存    1 重置
    save(type) {
      this.visible = false;
      let path = this.$route.path
      let storeCols = this.$store.getters['tableStore/getColumns'];
      let userId = this.$store.getters['loginStore/getUserInfo']['userId'];
      if(!storeCols[userId]) {
        storeCols[userId] = {}
      }
      storeCols[userId][path] = type == 0 ? jsonCopy(this.checkList) : [];
      this.$store.commit('tableStore/setColumns', storeCols)
      this.$emit('click', storeCols)
    },

    // 弹框显示事件
    properShow() {
      let path = this.$route.path
      let storeCols = this.$store.getters['tableStore/getColumns'];
      let userId = this.$store.getters['loginStore/getUserInfo']['userId'];
      if(!storeCols[userId]) {
        storeCols[userId] = {}
      }
      let hideCols = storeCols[userId][path] || [];
      this.checkList.splice(0, this.checkList.length, ...hideCols)
    }
  },
  watch: {
    values: {
      handler: function(nval) {
        this.checkList.splice(0, this.checkList.length, ...(nval || []))
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang='scss'>
.u-filter-col-checkbox {
  display: flex;
  flex-direction: column;
  .el-checkbox {
    padding: 3px 0
  }
}
</style>